<template>
  <div class="page">
    <mu-appbar :zDepth="0" class="header" title="钱包">
      <mu-icon-button icon="arrow_back_ios" slot="left" @click="goBack"/>
    </mu-appbar>
    <div class="content">
      <es-scrollEx :style="{height:ui.scrollHeight}">
        <mu-row>
          <mu-col width="33" tablet="33" desktop="33">
            <div class="item">
              <i class="material-icons  menuItemIcon">home</i>
              <span>收付款</span>
            </div>
          </mu-col>
          <mu-col width="33" tablet="33" desktop="33">
            <div class="item">
              <i class="material-icons  menuItemIcon">home</i>
              <span>零钱</span>
            </div>
          </mu-col>
          <mu-col width="33" tablet="33" desktop="33">
            <div class="item">
              <i class="material-icons  menuItemIcon">home</i>
              <span>银行卡</span>
            </div>
          </mu-col>
        </mu-row>
        <mu-row>
          <mu-col width="100" tablet="100" desktop="100">
            <div class="item2">
              <span>$32.2</span>
            </div>
          </mu-col>

        </mu-row>
        <div class="bigTitle"><span>腾讯服务</span></div>
        <es-collectionLayout :cols="3" :style="{height:'350px',position:'relative'}">

            <a v-for="tile, index in model.listOne" :key="index" class="waves-effect">
              <router-link to="/Sub/All/SubPage">
              <div style="height:63px;position:absolute;width:100%;top:calc((100% - 63px)/2);">
                <mu-icon :value="tile.icon" :size="36" :color="tile.color"/>
                <span style="color:white;display:inherit;">{{tile.title}}</span>
              </div>
              </router-link>
            </a>

        </es-collectionLayout>
        <div class="bigTitle"><span>腾讯服务</span></div>
        <es-collectionLayout :cols="3" :style="{height:'350px',position:'relative'}">
          <a v-for="tile, index in model.listOne" :key="index" class="waves-effect">
            <div style="height:63px;position:absolute;width:100%;top:calc((100% - 63px)/2);">
              <mu-icon :value="tile.icon" :size="36" :color="tile.color"/>
              <span style="color:white;display:inherit;">{{tile.title}}</span>
            </div>
          </a>
        </es-collectionLayout>
        <div slot="up">
          <div class="upIndicator">
            <i class="material-icons md-48 menuItemIcon">android</i>
            <p style="line-height: 0px">松开刷新</p>
          </div>

        </div>
      </es-scrollEx>
    </div>

  </div>
</template>

<script>
  export default{
    name: '',
    data(){
      return {
        ui: {
          scrollHeight: $screen.height - 56 + 'px'
        },
        model: {
          listOne: [{
            title: '信用卡还款',
            icon: 'home',
            color: 'red'
          }, {
            title: '手机充值',
            icon: 'flight_takeoff',
            color: 'blue'
          }, {
            title: '理财通',
            icon: 'cloud_download',
            color: 'green'
          }, {
            title: '生活缴费',
            icon: 'videogame_asset',
            color: '#EE175A'
          }, {
            title: 'Q币充值',
            icon: 'android',
            color: '#17D7EE'
          }, {
            title: '城市服务',
            icon: 'grade',
            color: '#5AEF17'
          }, {
            title: '腾讯公益',
            icon: 'home',
            color: '#7F2F0E'
          }]
        }
      }
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      }

    },
    beforeCreate(){

    },
    created(){

    },
    beforeUpdate(){

    },
    updated(){

    },
    beforeMount(){

    },
    mounted(){

    },
    beforeDestroy(){

    },
    destroyed(){

    },
    activated(){

    },
    deactivated(){

    }
  }


</script>

<style scoped>

  .main{
    width: 100%;
    height: 100%;
    position: fixed;
  }
  .header {
    width: 100%;
    position: fixed;
    top: 0px;
  }

  .content {
    position: fixed;
    top: 56px;
    width: 100%;
    height: calc(100% - 56px - 56px);
  }

  .item {
    height: 120px;
    padding-top: 60px;
    font-size: 16px;
  }

  .item2 {
    height: 60px;
  }

  .item i {
    display: block;
  }

  .item span {
    margin-top: 12px;
    display: block;
  }

  .bigTitle {
    background-color: rgba(160, 160, 160, 0.2);
    height: 30px;
    text-align: left;
    line-height: 30px;
    padding-left: 12px;
  }
</style>
